<template>
	<w-container id='colection' :loading='loading' class="bg-color-pageBg">
		<w-navbar :title="pageTitle" :titleStyle="{color:opacity>0.8?'#222':'#fff'}" :product="product" :opacity="opacity"  :leftIcon="opacity>0.8?'arrow-left-back':'arrow-left-back'" navType="goods" :bgColor="bgColor" :placeholder="false"></w-navbar>
		<!-- 主图部分 -->
		<w-product-details-card :product='product'>
			<view slot="right" class="flex-center flex-ai-end" @click="$u.route('/pages/market/marketGoodsList',{id:product.id,goodsType:product.goods_type})">
				<text class="font-color-white font-size-12 mr-2">{{handleLang('其他寄售')}}</text>
				<w-icon name="arrow-img" size="14" color="#fff"></w-icon>
			</view>
		</w-product-details-card> 
		<view style="background-color: #1f1f1f;">
			<!-- 藏品故事 -->
			<w-product-introduce :product='product'></w-product-introduce>
			<u-gap height="100rpx"></u-gap>
			<!-- 商品介绍 -->
			<w-product-detail :product='product'></w-product-detail>
		</view>
		<!-- 创作者信息及品牌方信息 -->
		<w-product-builder :product='product'></w-product-builder>
		<!-- 藏品编号 -->
		<w-product-number class='mt-12' :code="details.collection_code" :id="details.id"></w-product-number>
		<!-- 商品信息 -->
		<w-product-info-list class='mt-12' :product='product'></w-product-info-list>
		<!-- 商品介绍 -->
		<!-- <w-product-introduce class='mt-12' :product='product'></w-product-introduce> -->
		<!-- 购买须知 -->
		<w-product-buy-need class='mt-12' :product='product'></w-product-buy-need>
		<u-gap height="100"></u-gap>
		<!-- 版权 -->
		<!-- <w-copyright></w-copyright> -->
		<!-- 按钮状态 -->
		<collection-detail-button :info="details" :goodsType="product.goods_type" @refresh="getDetails"></collection-detail-button>
	</w-container>
</template>

<script>
	import { getUserCollectionDetails } from '@/api/collection/index.js';
	import collectionDetailButton from './components/collection-detail-button';
	import opacityMixin from '@/mixins/opacityNav.js'
	export default {
		components:{ collectionDetailButton },
		mixins:[opacityMixin],
		data() {
			return {
				loading: false,
				id: null,
				details:{},
				product: {
					goods_type:2,
					publisher:{}
				}
			};
		},
		onLoad({id}) {
			this.id = id;
			this.getDetails();
		},
		methods: {
			getDetails() {
				this.loading = true;
				getUserCollectionDetails(this.id).then(res=>{
					this.loading = false;
					let { product,types } = res.data;
					this.details = res.data;
					this.product = product;
					this.product.goods_type = types;
				}).catch(err=>{ this.loading = false; })
			}
		}
	}
</script>

<style lang="scss" scoped>
#colection{
	padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
}
</style>